<template>
  <div class="checkout-bar">
    <div class="select-all" @click="toggleSelectAll">
      <div class="check-circle" :class="{ checked: isAllItemsChecked }">
        <el-icon class="check-icon">
          <Check v-if="isAllItemsChecked" />
        </el-icon>
      </div>
      <span class="select-text">全选</span>
    </div>

    <div class="total-wrapper">
      <div class="total-amount">
        <span class="label">合计:</span>
        <span class="price">￥{{ checkedTotalPrice.toFixed(2) }}</span>
      </div>
      <button
        class="checkout-btn"
        :disabled="checkedItemCount === 0"
        :class="{ disabled: checkedItemCount === 0 }"
        @click="handleCheckout"
      >
        结算({{ checkedItemCount }})
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed } from "vue";
import { Check } from "@element-plus/icons-vue";
import { useCartStore } from "@/stores/cartStore";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import router from "@/router";

// --- 使用 Pinia Store 管理状态 ---
const cartStore = useCartStore();
const { items } = storeToRefs(cartStore); // 使用 storeToRefs 保持响应性

// 计算属性，根据 Store 中的 items 派生出数据
const checkedItems = computed(() => items.value.filter((item) => item.checked));
const checkedItemCount = computed(() => checkedItems.value.length);
const checkedTotalPrice = computed(() =>
  checkedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
);

// 判断是否所有商品都被选中
const isAllItemsChecked = computed(
  () => items.value.length > 0 && items.value.every((item) => item.checked)
);

// --- 生命周期钩子 ---
onMounted(async () => {
  // 当组件挂载时，从 Pinia Store 加载数据
  // cartStore.fetchCartItems() 负责从后台获取数据
  await cartStore.fetchCartItems();
});

// --- 事件处理函数 ---
const toggleSelectAll = () => {
  const isChecked = isAllItemsChecked.value;
  // 遍历所有商品，切换选中状态
  cartStore.items.forEach((item) => {
    item.checked = !isChecked;
  });
};

const handleCheckout = () => {
  if (checkedItemCount.value === 0) {
    ElMessage.warning("请至少选择一件商品进行结算");
    return;
  }

  ElMessage.success(
    `准备结算 ${
      checkedItemCount.value
    } 件商品，总价：￥${checkedTotalPrice.value.toFixed(2)}`
  );
  // 获取选中的购物车商品ID列表
  const checkedCartIds = checkedItems.value.map((item) => item.cartId);

  // 关键修改：跳转到订单确认页面，并将选中的 cartId 列表作为参数
  router.push({
    name: "OrderConfirm",
    query: {
      cartIds: JSON.stringify(checkedCartIds),
    },
  });
};

// --- 原始 watch 逻辑的调整 ---
// 原有的 watch props 逻辑全部移除，因为状态不再通过 props 传递
// 状态的改变现在通过 Pinia Store 中的 actions 来完成，并且所有组件都会自动响应
</script>

<style scoped>
/* 样式保持不变 */
.checkout-bar {
  position: fixed;
  bottom: 59px;
  left: 0;
  right: 0;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

/* 全选区域 */
.select-all {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.check-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.check-circle.checked {
  background: #ff5000;
  border-color: #ff5000;
}

.check-icon {
  width: 12px;
  height: 12px;
  color: white;
}

.select-text {
  font-size: 14px;
  color: #333;
}

/* 总计金额 */
.total-wrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.total-amount {
  display: flex;
  align-items: baseline;
  margin-right: 15px;
  white-space: nowrap;
}

.label {
  font-size: 14px;
  color: #333;
}

.price {
  color: #ff5000;
  font-weight: bold;
  font-size: 16px;
  margin-left: 5px;
}

/* 结算按钮 */
.checkout-btn {
  background: #ff5000;
  color: white;
  border: none;
  height: 40px;
  min-width: 100px;
  padding: 0 20px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.checkout-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

.checkout-btn::before,
.checkout-btn::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 40px;
  background: #ff5000;
}

.checkout-btn::before {
  left: -10px;
  border-radius: 0 20px 20px 0;
}

.checkout-btn::after {
  right: -10px;
  border-radius: 20px 0 0 20px;
}

.checkout-btn.disabled::before,
.checkout-btn.disabled::after {
  background: #ccc;
}
</style>